<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
        <!-- <input type="text" v-focus /> -->
        <div v-if="judge">
            <div v-img="imgurl"></div>
        </div>
        <button @click="mfn">点击我引用myfn.js</button>
        <!-- <div v-img="imgurl2"></div> -->
        <!-- <button @click="changeimgurl">点击我修改imgurl的值</button>
        <button @click="removeDirective">点击我移除指令</button> -->
    </div>
    <script type="module">
        import fn from "./mydn.js"
        // 指令：v- 开头都是指令
        // v-html v-text v-once v-pre v-if v-else-f v-else 
        // v-show v-slot ....
        // 自定义指令  :v-自定义指令名称
        // 一、全局自定义指令
        // Vue.directive("focus",{
        //     // 自定义指令的生命周期钩子
        //     inserted:function(ele,binding){
        //         // console.log(ele,binding)
        //         ele.focus();
        //     }
        // })
        // 二、局部自定义指令 
        
        Vue.use(fn)
        new Vue({
            el:"#app",
            data:{
                message:"数据",
                judge:true,
                imgurl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F113020142315%2F201130142315-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656293742&t=9e653e7ad7e32bdac5f3d84524e7959d",
                imgurl2:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F063021120F9%2F210630120F9-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656293742&t=98497c17cb516264ecc40aaf3db79480"
            },
            methods:{
                mfn(){
                    this.$fn();
                }
            },
            directives:{
                img:{
                    /* 
                        自定义指令的生命周期
                        bind : 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
                        inserted : 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
                        update : 所在组件更新的时候调用
                        componentUpdated : 所在组件更新完成后调用
                        unbind : 只调用一次，指令与元素解绑时调用
                    */

                    // bind:function(){
                    //     console.log("bind执行了");
                    // },
                    // update:function(oldvalue){
                    //     console.log("更新了",oldvalue);
                    // },
                    // componentUpdated:function(newvalue){
                    //     console.log("更新完毕",newvalue)
                    // },
                    // unbind:function(){
                    //     console.log("指令绑定解除的时候触发")
                    // },
                    inserted:function(ele,binding){
                        // console.log(binding);
                        /* 
                            name：指令名，不包括 v- 前缀。
                            value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
                            oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
                            expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
                            arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
                            modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
                        
                        
                        
                        */
                        console.log(ele,binding);
                        ele.style.width = "200px";
                        ele.style.height = "200px";
                        let imgurl = binding.value;
                        ele.style.backgroundImage = `url(${imgurl})`;
                        ele.style.backgroundSize="100% 100%";
                    }
                }
            },
            methods:{
                fn(){
                    console.log("fn")
                },
                // removeDirective(){
                //     this.judge = false;
                // },
                // changeimgurl(){
                //     this.imgurl = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F063021120F9%2F210630120F9-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656293742&t=98497c17cb516264ecc40aaf3db79480"
                // }
            }
        })

    </script>
</body>
</html>